﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

</head>
<body>
    <p>Vue组件的使用</p>
    <div id="app">
        <mycomponent></mycomponent>
        <my-component></my-component>
    </div>
    <div id="footId">
        <footer-vue></footer-vue>
    </div>
    <!--组件模板-->
    <template id="temApp">
        //这里是定义一个id，
        <div>
            <div id="nav">
                <router-link to="/">Home</router-link> |
                <router-link to="/about">Form</router-link> |
                <router-link to="/Vuex">Vuex</router-link>
            </div>
            <router-view />
        </div>
    </template>
    <tab-vue></tab-vue>

    <!--动态组件-->
    <!-- 组件会在 `currentTabComponent` 改变时改变 -->
    <component v-bind:is="currentTabComponent"></component>
    <div id="dynamic-component-demo" class="demo">
        <!--for 循环展示 banner-->
        <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button active', { active: currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button>
        <!-- 组件的使用 通过currentTabComponent 来动态展示是哪一个组件 -->
        <component v-bind:is="currentTabComponent" class="tab"></component>    <!--这里语法错误，删除本行注释！通过 is 特性，来动态实现组件，核心-->
    </div>
    <!--注意：这里可以使用 <keep-alive> 来缓存当然组件的内容-->
    <keep-alive>

        <component :is="currentTabComponent"></component>

    </keep-alive>

    <script src="js/vue.js"></script>
    <script>

        //全局的组件-----------------------------------
        Vue.component('mycomponent', {
            template: `<div>我的组件</div>`,
            data() {
                return {
                    message: '我爱莹莹'
                }
            }
        });
        new Vue({
            el: '#app'
        })

        //注意要在vue实例之前去定义，不然渲染页面的时候，会报错
        // 定义一个名为 footer-vue 的新组件
        Vue.component('footer-vue', {
            template: `
                                                     <div id="footer-vue">
                                                         <p>2018 <a href="#">一米阳光@博客</a> - 校园网签有限公司 <a href="#" style="font-weight: bold">CopyRight</a></p>
                                                         <p>
                                                             <a href="#">京ICP备242344249号</a>
                                                         </p>
                                                     </div>
                                                     `,
            data() {
                return {
                    message: 'hello world'
                }
            }
        })

        new Vue({
            el: '#footId'
        })


        //局部的组件-----------------------------------
        var app = new Vue({
            el: '#app',
            data: {
            },
            components: {
                'my-component': {//这个就是我们局部组件的名字 在页面内使用 <my-component></my-component>
                    template: `
                                                     <ul class ="contact-list non-style-list">
                                                         <li>
                                                             <b class ="twitter">TWITTER</b>: <a href="#">@laozhang</a>
                                                         </li>
                                                         <li>
                                                             <b class ="weibo">微博</b>: <a href="#">@laozhang</a>
                                                         </li>
                                                         <li>
                                                             <b class ="zhihu">知乎</b>: <a href="#" ></a>
                                                         </li>
                                                         <li>
                                                             <b class ="github">GITHUB</b>: <a href="https://github.com/anjoy8">anjoy8</a>
                                                         </li>
                                                         <li>
                                                             <b class ="email">EMAIL</b>: <a href="mailto:laozhang@azlinli.com">randypriv at azlinli</a>
                                                         </li>
                                                     </ul>`,
                    data() {
                        return {
                            message: 'hello world two'
                        }
                    },
                    directives: {//自定义局部指令，使用的时候，直接可以 <my-component v-focus><my-component>

                        'focus'(el, binding, vnode) {
                            /** el可以获取当前dom节点，并且进行编译，也可以操作事件 **/
                            /** binding指的是一个对象，一般不用 **/
                            /** vnode 是 Vue 编译生成的虚拟节点 **/
                            el.style.border = "1px solid red";  //操作style所有样式
                            console.log(el.value);  //获取v-model的值
                            console.log(el.dataset.name) //data-name绑定的值，需要el.dataset来获取
                            console.log(vnode.context.$route); //获取当前路由信息
                        }
                    }

                }
            }
        })
        //extend创建组件
        //var MyComponent = Vue.extend({
        //    template: '<div>A custom component!</div>'
        //})
        //Vue.component('my-component', MyComponent);
        //new Vue({
        //    el: '#example',
        //    data: {

        //    }
        //})


        //在使用的时候，直接引用 #temApp
        Vue.component('tabs-vue', {
            template: '#temApp',
            data() {
                return {
                    message: 'hello world'
                }
            }
        })

        //定义三个组件，可以比如是我们的三个页面，
        Vue.component('tab-home', {
            template: '<div>Home component</div>' //组件1，也就是页面1
        })
        Vue.component('tab-posts', {
            template: '<div>Posts component</div>' //组件2，页面2
        })
        Vue.component('tab-archive', {
            template: '<div>Archive component</div>' //组件3，页面3
        })
        new Vue({
            el: '#dynamic-component-demo',
            data: {
                currentTab: 'Home',//当前banner名称
                tabs: ['Home', 'Posts', 'Archive']//定义三个banner
            },
            computed: {//计算属性，实时监控获取当然banner的值，并返回到页面
                currentTabComponent: function () {
                    return 'tab-' + this.currentTab.toLowerCase()//组件名称拼串，一定要和上边的三个组件名对应
                }
            }
        })
    </script>
</body>
</html>